<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<meta name="x5-orientation" content="portrait" />
	<meta name="x5-fullscreen" content="true" />
	<meta name="screen-orientation" content="portrait" />
	<meta name="full-screen" content="yes" />
	<link rel="stylesheet" type="text/css" href="css/reset.css" />
	<link rel="stylesheet" type="text/css" href="css/dropload.css"/>
	<link rel="stylesheet" type="text/css" href="css/layer_mobile.css"/>
	<link rel="stylesheet" type="text/css" href="css/personal_maintain.css"/>
	<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
	<script type="text/javascript" src="js/dropload.min.js"></script>
	<script type="text/javascript" src="js/layer_mobile.js"></script>
	<script type="text/javascript" src="js/index.js"></script>
	<title>我的订单</title>
</head>
<body>
	<!-- header_头部 -->
	<header>
		<div>
			<a href="personal_center.html"></a>
			<form action="" method="post">		
				<label><i></i><input class="search" type="text" value="" placeholder="搜索商品名称" /></label>
			</form>
		</div>
	</header>
	<!-- nav_导航条 -->
	<nav>
		<div class="active">
			<a href="personal_maintain.html">全部</a>
		</div>
		<div>
			<a href="personal_main1.html">待付款</a>
		</div>
		<div>
			<a href="personal_main2.html">已付款</a>
		</div>
		<div>
			<a href="personal_main3.html">已完成</a>
		</div>
	</nav>
	<!-- section_订单内容 -->
	<section>
		<!-- 全部 -->
		<ul class="ullist all">
		</ul>
	</section>
</body>
</html>
<script>

  
	$('.btn img').on('click',function(){
		$('.btn').hide()
	})
	$(".search").keyup(function(){
    	search()
	});
	 //搜索功能,提交ajax数据到后台
	var key =  $(".search").val()	
	function search(){
		page = 0 ;
	    var html =''
	    var key =  $(".search").val()
	    $.ajax({
	        url: site+"/upkeep/myOrder",
	        data: {userId:loca_fetch('userid'),order:key,page:page,},
	        type: 'get',
	        dataType: 'json',
	        beforeSend:function(){
					$('ul li').css({'display':'none'})	
					$("body").append('<div id="pload" style="position:fixed;top:50%;z-index:1200;background:url(images/icon/loading-2.gif) top center no-repeat;width:100%;height:142px;margin:auto auto;"></div>');  
				},
	        complete: function () {  
	               $("#pload").remove();  
	               $('ul li').css({'display':'block'})
	        }, 
	        success: function (data) {
	        	var jsons = data.data.content
	            if(data.code==1){
	                $.each(jsons,function(i,val){
	                	var dates = getMyDate(val.createTime)
	                    //这一步是显示数据的关键，each方法可以操作二维数组数据
	                    //data.data：php返回的数据；
	                    //no：键值；
	                    //items:内层数组内容
	                    //拼接数据
							if(val.morderStatus == "1"){
								html += 
									"<li class=\"go\" data-moder="+val.morderId+">\n"
									+"	<div class=\"indent_title\">\n"
									+"		<img class=\"left\" src=\"images/icon/icon_35.png\" alt=\"\" />\n"
									+"		<i class=\"right\">待付款</i>\n"
									+"	</div>\n"
									+"	<div class=\"indent_main\">\n"
									+"		<em class=\"left\"><img src=\""+val.photo+"\" alt=\"\" /></em>\n"
									+"		<span class=\"left\">\n"
									+"			<i>"+ val.goodsName +"</i>\n"
									+"			<b>"+ dates +"<i></i><strong>下单</strong></b>\n"
									+"			<strong>实付:<i>¥"+ val.totalPrice.toFixed(2) +"</i></strong>\n"
									+"		</span>\n"
									+"		<div class=\"right1\">\n"
									+"			<p class=\"indent_num\">x"+ val.boxNumber +"</p>\n"
									+"			<em data-moder="+val.morderId+" class=\"remove_moder\">删除订单</em>\n"
									+"			<a class='payment' data-moder="+val.morderId+" href=\"javascript:;\">去付款</a>\n"
									+"		</div>\n"
									+"	</div>\n"
									+"</li>"
	                        }else if(val.morderStatus == "2"){
	                        	html += 
									"<li>\n"
									+"<div class='paymentss' data-moderi="+val.morderId+">\n"
									+"	<div class=\"indent_title\">\n"
									+"		<img class=\"left\" src=\"images/icon/icon_35.png\" alt=\"\" />\n"
									+"		<i class=\"right\">已付款</i>\n"
									+"	</div>\n"
									+"	<div class=\"indent_main\">\n"
									+"		<em class=\"left\"><img src=\""+val.photo+"\" alt=\"\" /></em>\n"
									+"		<span class=\"left\">\n"
									+"			<i>"+ val.goodsName +"</i>\n"
									+"			<b>"+ dates +"<i></i><strong>下单</strong></b>\n"
									+"			<strong>实付:<i>¥"+ val.totalPrice.toFixed(2) +"</i></strong>\n"
									+"		</span>\n"
									+"		<div class=\"right\">\n"
									+"			<p class=\"indent_num\">x"+ val.boxNumber +"</p>\n"
									+"			<a href=\"javascript:;\">待评价</a>\n"
									+"		</div>\n"
									+"	</div>\n"
									+"</div>\n"
									+"</li>"
	                        }else{
		                        html += 
									"<li>\n"
									+"<a class='payments' data-moder="+val.morderId+" href=\"javascript:;\">\n"
									+"	<div class=\"indent_title\">\n"
									+"		<img class=\"left\" src=\"images/icon/icon_35.png\" alt=\"\" />\n"
									+"		<i class=\"right\">已完成</i>\n"
									+"	</div>\n"
									+"	<div class=\"indent_main\">\n"
									+"		<em class=\"left\"><img src=\""+val.photo+"\" alt=\"\" /></em>\n"
									+"		<span class=\"left\">\n"
									+"			<i>"+ val.goodsName +"</i>\n"
									+"			<b>"+ dates +"<i></i><strong>下单</strong></b>\n"
									+"			<strong>实付:<i>¥"+ val.totalPrice.toFixed(2) +"</i></strong>\n"
									+"		</span>\n"
									+"		<div class=\"right\">\n"
									+"			<p class=\"indent_num\">x"+ val.boxNumber +"</p>\n"
									+"			<em data-moder="+val.morderId+" class=\"remove_moder\">删除订单</em>\n"
									+"		</div>\n"
									+"	</div>\n"
									+"</a>\n"
									+"</li>"
	                        }
	                });
	                $('.all').html(html)//显示数据，同时覆盖上一次搜索的数据
					$('.go').on('click',function(){
						var str = $(this).attr('data-moder');
						var int = str*1;
						loca_save('moderid',parseInt(str))
						window.location.href='./payment_details.html'
					})		
                    $('.paymentss').on('click',function(){
                        var str = $(this).attr('data-moderi');
                        var int = str*1;
                        loca_save('moderi',parseInt(str))
                        window.location.href='payment_details2.html'
                    })
                   	$('.payments').on('click',function(){
                        var str = $(this).attr('data-moder');
                        var int = str*1;
                        loca_save('moderids',parseInt(str))
                        window.location.href='./payment_details1.html'
                    })
                   	remove()
	            }
	        },
	    });
	}	
	var page = -1 ;
	$(function(){
		//页数
		if(loca_fetch('userid') == ''){
			$('.ullist').hide()
		}else{
			//订单详情		
			//全部	
				$('.all').dropload({
					scrollArea : window,
					loadDownFn : function(me){				
						page++;
						//拼接html
						var result = '';
						//获取待付款数据
						$.ajax({
			                type:"get",
			                url:site+"/upkeep/myOrder?page="+page,
			                dataType:'json',
			                data:{userId:loca_fetch('userid'),order:key},
			                success:function(data){		                	
			                    var jsons = data.data.content  
			                    console.log(jsons)
			                    var result = ''
								if(jsons.length > 0){
			                        $.each(jsons, function(i,val) {
			                        //时间戳
			                        var dates = getMyDate(val.createTime)
				                        if(val.morderStatus == "1"){
											result += 
												"<li class=\"go\" data-moder="+val.morderId+">\n"
												+"	<div class=\"indent_title\">\n"
												+"		<img class=\"left\" src=\"images/icon/icon_35.png\" alt=\"\" />\n"
												+"		<i class=\"right\">待付款</i>\n"
												+"	</div>\n"
												+"	<div class=\"indent_main\">\n"
												+"		<em class=\"left\"><img src=\""+val.photo+"\" alt=\"\" /></em>\n"
												+"		<span class=\"left\">\n"
												+"			<i>"+ val.goodsName +"</i>\n"
												+"			<b>"+ dates +"<i></i><strong>下单</strong></b>\n"
												+"			<strong>实付:<i>¥"+ val.totalPrice.toFixed(2) +"</i></strong>\n"
												+"		</span>\n"
												+"		<div class=\"right1\">\n"
												+"			<p class=\"indent_num\">x"+ val.boxNumber +"</p>\n"
												+"			<em data-moder="+val.morderId+" class=\"remove_moder\">删除订单</em>\n"
												+"			<a class='payment' data-moder="+val.morderId+" href=\"javascript:;\">去付款</a>\n"
												+"		</div>\n"
												+"	</div>\n"
												+"</li>"
				                        }else if(val.morderStatus == "2"){
				                        	result += 
												"<li>\n"
												+"  <div class='paymentss' data-moder="+val.morderId+">\n"
												+"	<div class=\"indent_title\">\n"
												+"		<img class=\"left\" src=\"images/icon/icon_35.png\" alt=\"\" />\n"
												+"		<i class=\"right\">已付款</i>\n"
												+"	</div>\n"
												+"	<div class=\"indent_main\">\n"
												+"		<em class=\"left\"><img src=\""+val.photo+"\" alt=\"\" /></em>\n"
												+"		<span class=\"left\">\n"
												+"			<i>"+ val.goodsName +"</i>\n"
												+"			<b>"+ dates +"<i></i><strong>下单</strong></b>\n"
												+"			<strong>实付:<i>¥"+ val.totalPrice.toFixed(2) +"</i></strong>\n"
												+"		</span>\n"
												+"		<div class=\"right\">\n"
												+"			<p class=\"indent_num\">x"+ val.boxNumber +"</p>\n"
												+"			<a href=\"javascript:;\">待评价</a>\n"
												+"		</div>\n"
												+"	</div>\n"
												+"  </div>\n"
												+"</li>"
				                        }else{
					                        result += 
												"<li>\n"
												+"<a class='payments' data-moder="+val.morderId+" href=\"javascript:;\">\n"
												+"	<div class=\"indent_title\">\n"
												+"		<img class=\"left\" src=\"images/icon/icon_35.png\" alt=\"\" />\n"
												+"		<i class=\"right\">已完成</i>\n"
												+"	</div>\n"
												+"	<div class=\"indent_main\">\n"
												+"		<em class=\"left\"><img src=\""+val.photo+"\" alt=\"\" /></em>\n"
												+"		<span class=\"left\">\n"
												+"			<i>"+ val.goodsName +"</i>\n"
												+"			<b>"+ dates +"<i></i><strong>下单</strong></b>\n"
												+"			<strong>实付:<i>¥"+ val.totalPrice.toFixed(2) +"</i></strong>\n"
												+"		</span>\n"
												+"		<div class=\"right\">\n"
												+"			<p class=\"indent_num\">x"+ val.boxNumber +"</p>\n"
												+"			<em data-moder="+val.morderId+" class=\"remove_moder\">删除订单</em>\n"
												+"		</div>\n"
												+"	</div>\n"
												+"</a>\n"
												+"</li>"
				                        }
			                    	});
								//如果没有数据
								}else{
									//锁定
									me.lock()
									//无数据
									me.noData();
								}
								setTimeout(function(){
									//插入数据到页面，放到最后
									$('.all').append(result);
			                        $('.go').on('click',function(e){
			                        	e.stopPropagation()
			                            var str = $(this).attr('data-moder');
			                            var int = str*1;
			                            loca_save('moderid',parseInt(str))
			                            window.location.href='./payment_details.html'
			                        })
				                    $('.paymentss').on('click',function(){
				                        var str = $(this).attr('data-moder');
				                        var int = str*1;
				                        loca_save('moderids',parseInt(str))
				                        window.location.href='payment_details2.html'
				                    })
				                   	$('.payments').on('click',function(){
				                        var str = $(this).attr('data-moder');
				                        var int = str*1;
				                        loca_save('moderids',parseInt(str))
				                        window.location.href='./payment_details1.html'
				                    })
   			                  		remove()
									//每次数据插入，必须重置
									me.resetload();
								});
							},
							error : function(xhr,type){
								me.resetload();
								//即使加载出错也必须重置
							}
						});
						remove()
					}
				})
			}
		})
	function remove(){
   		//删除订单 		
	    $('.remove_moder').on('click',function(e){
	    	e.stopPropagation()	    	
			var str = $(this).attr('data-moder');
			var int = str*1;
			loca_save('moderid',parseInt(str))
			btnremove()
    	})
	}    

</script>